<template>
  <div>
    <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
      <a class="navbar-brand col-md-3 col-lg-2 appnav" href="#">
        <!--        <i class="fa fa-qq fa-2x"></i>-->
        test管理后台
      </a>
      <ul class="nav justify-content-end">
        <li class="nav-item">
          <a class="nav-link" href="#">{{ userInfo.username }}</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/loginOut">Sign out</a>
        </li>
      </ul>
    </nav>
    <div class="container-fluid">

      <div class="row">

        <nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
          <div class="sidebar-sticky pt-3">
            <ul class="nav flex-column">
              <li class="nav-item">
                <router-link class="nav-link" to="/">首页</router-link>
              </li>
              <li class="nav-item">
                <router-link class="nav-link" to="/goodsManager">商品管理</router-link>
              </li>
              <li class="nav-item">
                <router-link class="nav-link" to="/orderManager">订单管理</router-link>
              </li>
              <li class="nav-item">
                <router-link class="nav-link" to="/financialManager">财务管理</router-link>
              </li>
              <li class="nav-item">
                <router-link class="nav-link" to="/dataAnalysis">数据分析</router-link>
              </li>
              <li class="nav-item">
                <router-link class="nav-link" to="/systemSet">系统设置</router-link>
              </li>
            </ul>
          </div>
        </nav>

        <main role="main" class="col-md-9 col-lg-10 ml-sm-auto px-md-4">
          <router-view></router-view>
        </main>

      </div>
    </div>


  </div>
</template>

<script>
module.exports = {
  data(){
    // console.log(JSON.parse(window.sessionStorage.getItem("userInfo")))
    return {
      userInfo: N
    }
  }
}
</script>
<style scoped>

.appnav {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 48px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.nav-link.router-link-exact-active.router-link-active {
  color: #007bff;
}

</style>